<template>
  <div id="richTextAdd" class="richTextAdd">

    <!-- 新增/修改内容 -->
    <div class="modify_center" >
      <el-form ref="addForm" :model="formDialog" :rules="rules" label-width="80px">
        <!-- <p class="title_H1" style="margin-bottom: 20px;" >富文本编辑</p> -->
        <div class="" style="width: 100%" >
          <el-form-item label="LOGO" prop="">
            <Up-img :oss-image-url="ossImageUrl" :theme="'rectangular'" :number="1" />
          </el-form-item>
          <el-form-item label="类型" prop="type" >
            <el-select v-model="formDialog.type" placeholder="请选择" style="width: 300px" >
              <el-option label="协议" :value="0" />
              <el-option label="其他" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="标识符" prop="keyStr">
            <el-input v-model="formDialog.keyStr" style="width: 300px" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="标题" prop="name">
            <el-input v-model="formDialog.title" style="width: 300px" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="主体内容" prop="">
            <editor v-model="textContent" :min-height="192" />
          </el-form-item>
        </div>
      </el-form>
    </div>

    <!-- 操作按钮 -->
    <div class="button_center r_flex_center" >
      <el-button type="primary" @click="submitForm" >保存富文本</el-button>
    </div>
  </div>
</template>

<script>
import { richTextList, delrichText, getrichText, uprichText, addrichText } from '@/api/business/richText'
import UpImg from '@/components/UpImg'

export default {
  name: 'richTextAdd',
  components: { UpImg },
  props: {
    upId: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      // 添加/修改表单参数
      formDialog: {
        // id: '',
        // logo
        logo: '',
        // 标题
        title: '',
        // 富文本内容
        content: '',
        // 类型
        type: '',
        // 标识符
        keyStr: '',
      },
      // 富文本
      textContent: '',
      // 表单校验
      rules: {
        logo: [ { required: true, message: 'LOGO不能为空', trigger: 'blur' } ],
        title: [ { required: true, message: '标题不能为空', trigger: 'blur' } ],
      },
      // 上传图片选项
      ossImageUrl: [],
    }
  },
  created() {
    // 富文本数据
    this.getChannelFun()
  },
  methods: {
    // 获取所有渠道
    async getChannelFun() {
      if (this.$route.query.id) {
        const newparm = await getrichText(this.$route.query.id)
        this.textContent = newparm.data.content
        this.formDialog = newparm.data
        if (this.formDialog.logo) {
          this.$set(this.ossImageUrl, 0, { url: this.formDialog.logo, id: 2333 } )
        }
      } else if (this.upId) {
        const newparm = await getrichText(this.upId)
        this.textContent = newparm.data.content
        this.formDialog = newparm.data
        if (this.formDialog.logo) {
          this.$set(this.ossImageUrl, 0, { url: this.formDialog.logo, id: 2333 } )
        }
      } else {
        // console.log('新增')
        this.ossImageUrl = []
        this.textContent = ''
        this.formDialog = this.$options.data().formDialog
      }
    },
    upcontent(data) {
      this.textContent = data
    },
    // 保存产品
    submitForm() {
      this.$refs['addForm'].validate(valid => {
        this.formDialog.content = this.textContent
        this.formDialog.logo = this.ossImageUrl[0] ? this.ossImageUrl[0].url : ''
        // console.log(this.formDialog.content, 'textContent')
        if (this.formDialog.id != null) {
          uprichText(this.formDialog)
            .then(response => {
              this.$modal.msgSuccess('修改成功')
              this.$emit('upRichText', true)
            })
            .finally(() => {
            })
        } else {
          addrichText(this.formDialog)
            .then(response => {
              this.$modal.msgSuccess('新增成功')
              this.$emit('upRichText', true)
              // this.$router.push({ path: '/business/richTextList' })
            })
            .finally(() => {
            })
        }
      })
    }
  },
  watch: {
    upId(dara) {
      this.upId = dara
      // 富文本数据
      this.getChannelFun()
    }
  }
}
</script>

<style scoped lang="scss">
.richTextAdd {
  padding: 20px;
}
</style>

<style lang="scss">
.ql-editor{
  min-height: 180px;
}
</style>
